<template>
  <div class="card">
    <h2 class="text-lg font-bold">产业结构</h2>

    <!-- 产业占比环形图 -->
    <div class="grid grid-cols-3 gap-4 mb-6">
      <div class="bg-blue-50 p-4 rounded-lg shadow-sm flex flex-col items-center">
        <div class="relative w-24 h-24 mb-2">
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <!-- 背景圆环 -->
            <circle cx="50" cy="50" r="40" fill="none" stroke="#e2e8f0" stroke-width="10" />
            <!-- 数据圆环 - 第一产业 -->
            <circle
              cx="50"
              cy="50"
              r="40"
              fill="none"
              stroke="#3b82f6"
              stroke-width="10"
              :stroke-dasharray="[(resList[props.yearStr].agriculture / 100) * 251.2, 251.2]"
              stroke-dashoffset="0"
              transform="rotate(-90 50 50)"
            />
            <!-- 中心文本 -->
            <text
              x="50"
              y="50"
              text-anchor="middle"
              dominant-baseline="middle"
              class="text-2xl font-bold text-blue-700"
            >
              {{ resList[props.yearStr].agriculture }}%
            </text>
          </svg>
        </div>
        <p class="text-sm text-gray-600">第一产业</p>
      </div>

      <div class="bg-green-50 p-4 rounded-lg shadow-sm flex flex-col items-center">
        <div class="relative w-24 h-24 mb-2">
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <!-- 背景圆环 -->
            <circle cx="50" cy="50" r="40" fill="none" stroke="#e2e8f0" stroke-width="10" />
            <!-- 数据圆环 - 第二产业 -->
            <circle
              cx="50"
              cy="50"
              r="40"
              fill="none"
              stroke="#22c55e"
              stroke-width="10"
              :stroke-dasharray="[(resList[props.yearStr].industry / 100) * 251.2, 251.2]"
              stroke-dashoffset="0"
              transform="rotate(-90 50 50)"
            />
            <!-- 中心文本 -->
            <text
              x="50"
              y="50"
              text-anchor="middle"
              dominant-baseline="middle"
              class="text-2xl font-bold text-green-700"
            >
              {{ resList[props.yearStr].industry }}%
            </text>
          </svg>
        </div>
        <p class="text-sm text-gray-600">第二产业</p>
      </div>

      <div class="bg-purple-50 p-4 rounded-lg shadow-sm flex flex-col items-center">
        <div class="relative w-24 h-24 mb-2">
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <!-- 背景圆环 -->
            <circle cx="50" cy="50" r="40" fill="none" stroke="#e2e8f0" stroke-width="10" />
            <!-- 数据圆环 - 第三产业 -->
            <circle
              cx="50"
              cy="50"
              r="40"
              fill="none"
              stroke="#a855f7"
              stroke-width="10"
              :stroke-dasharray="[(resList[props.yearStr].service / 100) * 251.2, 251.2]"
              stroke-dashoffset="0"
              transform="rotate(-90 50 50)"
            />
            <!-- 中心文本 -->
            <text
              x="50"
              y="50"
              text-anchor="middle"
              dominant-baseline="middle"
              class="text-2xl font-bold text-purple-700"
            >
              {{ resList[props.yearStr].service }}%
            </text>
          </svg>
        </div>
        <p class="text-sm text-gray-600">第三产业</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'
const props = defineProps({
  yearStr: String,
})
// 产业占比数据
let resList = ref({
  2024: {
    agriculture: 3.5,
    industry: 45.3,
    service: 45.2,
  },
  2023: {
    agriculture: 2.5,
    industry: 45.3,
    service: 32.2,
  },
  2022: {
    agriculture: 1.5,
    industry: 22.3,
    service: 33.2,
  },
  2021: {
    agriculture: 2.1,
    industry: 55.9,
    service: 42.9,
  },
  2020: {
    agriculture: 2.5,
    industry: 55.3,
    service: 42.2,
  },
})
</script>

<style scoped></style>
